<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧公交系统</title>
    <link rel="stylesheet" href="css/list.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <link rel="stylesheet" href="css/style.css">
    <style>
        
        .nav{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 50px;
        }
        .container{
            padding-top: 80px;
            height: auto;
        }
        .container-right{
            width: auto;
        }
        .blog-pagnation-wrapper{
            height: 40px;
            margin: 16px 0;
            text-align: center;
        }
        .blog-pagnation-item{
            display: inline-block;
            padding: 8px;
            border: 1px solid #d0d0d5;
            color: #333;
        }
        .blog-pagnation-item:hover{
            background: #4e4eeb;
            color: #fff;
        }
        .blog-pagnation-item.actvie{
            background: #4e4eeb;
            color: #fff;
        }

    </style>
    <script src="js/jquery.min.js"></script>
</head>

<body>
<!-- 导航栏 -->
<div class="nav">
    <img src="img/dog.png" alt="">
    <span class="title">智慧公交系统</span>
    <!-- 用来占据中间位置 -->
    <span class="spacer"></span>
    <a href="首页.html">首页</a>
    <a href="login.html">注销</a>
</div>
<!-- 版心 -->
<div class="container">
    <!-- 右侧内容详情 -->
    <div class="container-right" style="width: 100%;">
        <h1>车辆信息管理</h1>

        <input type="text" id="text" placeholder="请输入要删除的编号"> 
        <button  onclick="myDel()">删除</button>

        <hr>
        code <input style="width:8%;"  type="text" placeholder="添加用户编号" id="code">
        roleCode <input style="width:8%;"  type="text" placeholder="添加角色" id="roleCode">
        u_loginName <input style="width:8%;"  type="text" placeholder="添加账号" id="u_loginName">
        u_password <input style="width:8%;"  type="text" placeholder="添加密码" id="u_password">
        <br>
        u_name <input style="width:8%;"  type="text" placeholder="添加姓名" id="u_name">
        phone <input style="width:8%;"  type="text" placeholder="添加手机号" id="phone">
        idCard <input style="width:8%;"  type="text" placeholder="添加身份证" id="idCard">
        driving <input style="width:8%;"  type="text" placeholder="添加驾龄" id="driving">
        status <input style="width:8%;"  type="text" placeholder="添加状态" id="status">
        <button onclick="add()" class="gongneng">
            添 加
        </button>
        <table>

            <!-- 从数据库中拿数据 -->
            <div id="artListDiv">
            
            </div>
        </table>
        <p></p>  



        <hr>
        <div class="blog-pagnation-wrapper">
            <button onclick="goFirstPage()" class="blog-pagnation-item">首页</button>
            <button onclick="goBeforePage()" class="blog-pagnation-item">上一页</button>
            <button onclick="goNextPage()" class="blog-pagnation-item">下一页</button>
            <button onclick="goLastPage()" class="blog-pagnation-item">末页</button>
        </div>
    </div>
</div>
<script>

    //实现添加,删除和保存
    function myDel(){
        var code=$("#text").val();
        jQuery.ajax({
            url:"/user/myDel",
            type:"POST",
            data:{"code":code},
            success:function(result){
                if(result!=null && result.code==200){
                    alert("恭喜：删除成功！");
                    // 刷新当前页面
                    location.href = location.href;
                }else{
                    alert("抱歉：删除失败，请重试！");
                }
            }
        });
    }
    function add(){
        var code=$("#code").val();
        var  roleCode=$("#roleCode").val();
        var u_loginName=$("#u_loginName").val();
        var u_password=$("#u_password").val();
        var u_name=$("#u_name").val();
        var phone=$("#phone").val();
        var idCard=$("#idCard").val();
        var driving=$("#driving").val();
        var status=$("#status").val();
        jQuery.ajax({
           url:"/user/add",
           type:"POST",
           data:{"code":code,"roleCode":roleCode,"u_loginName":u_loginName,"u_password":u_password,"u_name":u_name,"phone":phone,"idCard":idCard,
           "driving":driving,"status":status},
           success:function(result){
            if(result!=null && result.code==200){
                    alert("恭喜：添加成功！");
                    location.href = location.href;
            }else{
                    alert("抱歉：添加失败，请重试！");
            }
           }
        });
    }
        // 2.查询后端接口得到当前页面的数据，进行展示
        function initPage(){
            jQuery.ajax({
            url:"/user/getanyuser",
            type:"POST",
            data:{},
            success:function(result){
                if(result!=null && result.code==200){
                    var artListHtml = "<tr><td>员工编号</td><td>姓名</td><td>手机号</td><td>角色</td><td>用户状态</td></tr>";
                    for(var i=0;i<result.data.length;i++){
                        var articleinfo = result.data[i];

                        artListHtml +='<tr>';
                        artListHtml +='<td>'+articleinfo.code+'</td>';
                        artListHtml +='<td>'+articleinfo.u_name+'</td>';
                        artListHtml +='<td>'+articleinfo.phone+'</td>';
                        artListHtml +='<td>'+articleinfo.roleCode+'</td>';
                        artListHtml +='<td>'+articleinfo.status+'</td>';
                        artListHtml +='<tr>';
                    }
                    jQuery("#artListDiv").html(artListHtml);

                }
            }
           });
        }
        initPage();

        // // 跳转到首页
        // function goFirstPage(){
        //     if(pindex<=1){
        //         alert("当前已经在首页了");
        //         return;
        //     }
        //     location.href = "blog_list.html";
        // }
        // // 点击上一页按钮
        // function goBeforePage(){
        //     if(pindex<=1){
        //         alert("当前已经在首页了");
        //         return;
        //     }
        //     pindex = parseInt(pindex) -1;
        //     location.href ="blog_list.html?pindex="+pindex;
        // }
        // function goNextPage(){
        //     if(pindex>=pcount){
        //        alert("已经在末页了");
        //        return;
        //     }
        //     pindex = parseInt(pindex)+1;
        //     location.href ="blog_list.html?pindex="+pindex;
        // }
        // function goLastPage(){
        //     if(pindex>=pcount){
        //        alert("已经在末页了");
        //        return;
        //     }
        //     location.href ="blog_list.html?pindex="+pcount;
        // }
    </script>
</body>
</html>